<template>
  <div>
    <ProTable v-loading="loading" :data="tableData" :page="page" :column="column" :rowControl="[]"
      :elProps="{ border: true }" :disabled="[]" :controlWidth="{
        courseTime: 330
      }" @page-change="onPageChange" @pageRefresh="pageRefresh">
      <template #default="{ row, propname }">
        <div v-if="propname === 'course'">
          {{ row[propname]?.number }}
        </div>
      </template>
      <template #search_operate>
        <el-table-column fixed="right" min-width="50px">
          <template #default="scope">
            <el-link class="flex justify-center" type="primary" :underline="false"
              @click="handleSelect(scope.row, scope.$index,)">調堂</el-link>
          </template>
        </el-table-column>
      </template>
    </ProTable>
    <TuningHallLog ref="delayedRef" @update="update"></TuningHallLog>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { getSign } from '@/http/index.js'
import TuningHallLog from './TuningHallLog.vue'
import { dayjs } from "element-plus";
import { message } from '@/common/function.js'
const column = {
  name: '課程名字',
  course: '課程編號',
  invnumber: '發票編號',
  courseTime: '上課時間',
  teacher: '導師',
  count: '上課人數',
  statuste: '出席狀態'

}
const props = defineProps({
  echo: Object,
  tableDataDT: Object
})
const page = reactive({ page: 1, limit: 10, total: 0, page_size: [10, 20, 30] })
const loading = ref(false)
const tableData = ref([])
const form = reactive({
  student_id: ''
})
watch(() => props.echo, (newval) => {
  form.student_id = newval.id
}, { deep: true, immediate: true })

watch(() => props.tableDataDT, (newval) => {
  console.log(newval);
  tableData.value = newval
  console.log(tableData.value);
  // page.total = newval.data.total
})

const init = async () => {
  console.log(123);
  loading.value = true
  Object.assign(form, page)
  const data = await getSign(form)
  if (data.code == 200) {
    data.data.data.map(e => {
      if (e.date && e.time1) {
        e.courseTime = e.date + '-' + e.time1
      } else {
        e.courseTime = e.start_time + '-' + e.end_time.split(' ')[1]
      }
      // e.teacher = e.course[0]?.teacher
    })
    loading.value = false
    page.total = data.data.total
    data.data.data.map(e => {
      e.name = e.course?.name
    })
    tableData.value = data.data.data
  }
}
const delayedRef = ref('')
const ticketList = ref({})
const handleSelect = (e) => {
  let currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  console.log(e.start_time);
  console.log(dayjs(e.start_time).subtract(2, 'hour').format('YYYY-MM-DD HH:mm:ss'));
  if (dayjs(dayjs(e.start_time).subtract(2, 'hour').format('YYYY-MM-DD HH:mm:ss')).isAfter(currentTime)) {
    delayedRef.value.init(e, form.student_id)
  } else {
    return message('當前課程已禁止調堂', 'warning')
  }
}

const onPageChange = async ({ e, type }) => {
  if (type == "current") {
    page.page = e;
  }
  if (type == "size") {
    page.page = 1
    page.limit = e;
  }
  await init();
}
const pageRefresh = async () => {
  loading.value = true
  page.page = 1
  await init();
}
const update = () => {
  init();
}
defineExpose({
  init, page
})

</script>

<style scoped lang='less'></style>